<script setup>
import { reactive, onMounted, ref } from "vue";
import avatar from "./assets/avatar.png";
import avatar1 from "./assets/avatar_1.png";
import avatar2 from "./assets/avatar_2.png";
import SexIcon from "./components/SexIcon.vue";

const data = {
    name: "小太浪",
    isSign: "未签约",
    sex: "女",
    age: 26,
    phone: 12812345678,
    address: "湖南省长沙县黄兴镇xx村xx组",
    source: "医生建档",
    tags: [
        { name: "高血压", type: "success" },
        { name: "低血糖", type: "warning" },
    ],
    idCard: "430121200010101010",
    familyMembers: [
        { identity: "母亲", age: 59, name: "金岭", avatar: avatar1, sex: 1 },
        { identity: "父亲", age: 60, name: "赵四", avatar: avatar2, sex: 2 },
    ],
    avatar_url: avatar,
    tabs: [
        { icon: "point-gift-o", name: "健康档案" },
        { icon: "gem-o", name: "健康记录" },
        { icon: "fire-o", name: "签约信息" },
        { icon: "friends-o", name: "服务记录" },
    ],
};
const state = reactive({ userInfo: {} });
const isLoading = ref(false);
const getApi = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data);
        }, 1000);
    });
};
const getData = async () => {
    isLoading.value = true;
    state.userInfo = await getApi();
    isLoading.value = false;
    console.log(isLoading);
};
onMounted(() => {
    getData();
});
</script>

<template>
    <div class="container" v-if="!isLoading">
        <header>
            <div class="header-bc"></div>
            <div class="header-content">
                <div class="header-content_inner">
                    <van-image
                        width="100"
                        height="100"
                        cover
                        round
                        :src="state.userInfo.avatar_url"
                    />
                    <div class="header-content_name">
                        {{ state.userInfo.name }}
                    </div>
                    <div>
                        <van-tag plain type="success">{{
                            state.userInfo.isSign
                        }}</van-tag>
                    </div>
                </div>
                <div class="header-content_tabs">
                    <div
                        v-for="tab in state.userInfo.tabs"
                        class="header-content_tab"
                    >
                        <div>
                            <van-icon :name="tab.icon" size="30" />
                        </div>
                        <div class="header-content_tab_name">
                            {{ tab.name }}
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <main>
            <h3>个人信息</h3>
            <div>
                <van-cell-group inset>
                    <van-cell title="身份证号" :value="state.userInfo.idCard" />
                    <van-cell title="性别" :value="state.userInfo.sex" />
                    <van-cell title="年龄" :value="state.userInfo.age" />
                    <van-cell title="联系电话" :value="state.userInfo.phone" />
                    <van-cell title="现居地" :value="state.userInfo.address" />
                    <van-cell title="居民来源" :value="state.userInfo.source" />
                    <van-cell title="真实姓名">
                        <template #value>
                            <span
                                class="main-item_tag"
                                v-for="item in state.userInfo.tags"
                            >
                                <van-tag plain :type="item.type">
                                    {{ item.name }}
                                </van-tag>
                            </span>
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
            <h3>家庭成员</h3>
            <div class="main-family_content">
                <div
                    v-for="item in state.userInfo.familyMembers"
                    class="main-family_item"
                >
                    <div class="main-family_img">
                        <van-image
                            width="50"
                            height="50"
                            cover
                            round
                            :src="item.avatar"
                        />
                    </div>
                    <div class="main-family_info">
                        <div class="main-family_info_name">
                            {{ item.name }} <span>{{ item.age }}岁</span>
                            <sex-icon :sex="item.sex" />
                        </div>
                        <div class="main-family_info_identity">
                            关系：{{ item.identity }}
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="footer-btn">添加服务</div>
        </footer>
    </div>
    <div v-else style="text-align: center;padding-top: 40%;">
        <van-loading />
    </div>
</template>
<style scoped>
.container {
    background-color: #eee;
    padding-bottom: 50px;
}
header {
    .header-bc {
        height: 160px;
        background: var(--var-primary);
    }
    .header-content {
        margin: -80px 10px 0;
        box-sizing: border-box;
        padding: 0 12px 20px;
        background-color: #fff;
        border-radius: 4px;
        text-align: center;
        position: relative;
        .header-content_inner {
            margin-top: -50px;
            display: inline-block;
        }
        .header-content_name {
            font-size: 14px;
            color: #2b2b2b;
        }
        .header-content_tabs {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            .header-content_tab {
                .header-content_tab_name {
                    margin-top: 4px;
                    color: #2b2b2b;
                    font-size: 12px;
                }
            }
        }
    }
}
main {
    box-sizing: border-box;
    padding: 0 10px;
    :deep(.van-cell-group) {
        margin: 0;
    }
    :deep(.van-cell__title) {
        width: 100px;
        flex: none;
    }
    :deep(.van-cell__value) {
        text-align: left;
    }
    h3 {
        font-weight: 400;
        color: #2b2b2b;
        font-size: 14px;
        padding: 12px 0 10px 0;
    }
    .main-item_tag {
        margin-right: 5px;
    }
    .main-family_content {
        padding-left: 16px;
        background: #fff;
        box-sizing: border-box;
        display: flex;
        height: 100px;
        align-items: center;
        justify-content: space-between;
        .main-family_item {
            display: flex;
            align-items: center;
            background: #eee;
            height: 60px;
            width: 160px;
            padding-left: 18px;
            box-sizing: border-box;
            border-radius: 8px;
            .main-family_img {
                margin-right: 8px;
            }
            .main-family_info {
                .main-family_info_name {
                    font-size: 16px;
                    color: #2b2b2b;
                    font-weight: 500;
                    span {
                        font-size: 12px;
                        margin-right: 4px;
                    }
                }
                .main-family_info_identity {
                    font-size: 14px;
                    color: gray;
                }
            }
        }
    }
}
footer {
    background: #fff;
    padding: 0 10px;
    height: 50px;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    bottom: 0;
    .footer-btn {
        height: 40px;
        line-height: 40px;
        background: var(--var-primary);
        color: #fff;
        text-align: center;
        border-radius: 5px;
    }
}
</style>
